<!DOCTYPE HTML>
<html>
	<head>
		<title>用法</title>
	    <meta charset="UTF-8"/>
	</head>
	<style>
		tr{
			height:40px;
			text-align:center;
		}
	</style>
	<script type="text/javascript">
		function my(){
			var cc=document.getElementById("k");
			cc.className="puffout";
		}
	</script>
 <body>
   <div>
 	   wow+animate用法讲解：<img src="" id="k" width="200px" height="200px" clas="" onclick="my()" />
 	   <div>
            1.引入文件先引入JQ文件在引入本文件，也可以使用CDM,特别注意：不能用JQ调用addClass()来增加类<pre>	function kyol_addclass(el,cn){
	var elname=document.getElementById(el);
	
	  elname.className=elname.className+" "+cn;

	}</pre><br>
            2.页面调用函数    new WOW().init();函数注意大小写这里的WOW 是大写<br />
            3.到对应DIV或者块级对象或元素对象上定义class类【class="wow 效果函数"】，注意这里的wow是小,函数是大小写组合<br/>
            4.常用函数：
           <table style="height: auto; width: 1180px;text-" border="1">
<tbody>
<tr>
<td>wow rollIn</td>
<td>从左到右、顺时针滚动、透明度从100%变化至设定值</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>wow bounceIn</td>
<td>从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值</td>
</tr>
<tr>
<td>wow bounceInUp</td>
<td>从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变</td>
</tr>
<tr>
<td>wow bounceInDown</td>
<td>从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变</td>
</tr>
<tr>
<td>wow bounceInLeft</td>
<td>从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变</td>
</tr>
<tr>
<td>wow bounceInRight</td>
<td>从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>wow slideInUp</td>
<td>从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）</td>
</tr>
<tr>
<td>wow slideInDown</td>
<td>从上往下、上来后固定到设定位置、透明度为设定值不变</td>
</tr>
<tr>
<td>wow slideInLeft</td>
<td>从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）</td>
</tr>
<tr>
<td>wow slideInRight</td>
<td>从右往左、上来后固定到设定位置、透明度为设定值不变</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>wow lightSpeedIn</td>
<td>从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值</td>
</tr>
<tr>
<td>wow pulse</td>
<td>原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）</td>
</tr>
<tr>
<td>wow flipInX</td>
<td>原位置后仰前栽、透明度从100%变化至设定值</td>
</tr>
<tr>
<td>wow flipInY</td>
<td>原位置左右旋动、透明度从100%变化至设定值</td>
</tr>
<tr>
<td>wow bounce</td>
<td>上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）</td>
</tr>
<tr>
<td>wow shake</td>
<td>左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）</td>
</tr>
<tr>
<td>wow swing</td>
<td>从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变</td>
</tr>
<tr>
<td>wow bounceInU</td>
<td>原位置不变、直接从不显示到显示（无过过渡效果）</td>
</tr>
<tr>
<td>wow wobble</td>
<td>原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变</td>
</tr>
</tbody>
</table>
            <br/>
            5.给选中对象添加属性值<br />
            <ul>
            	<li>data-wow-duration="2s" 持续多久动画完成</li>
            	<li>data-wow-delay="2s" 延迟多久执行</li>
            	<li>data-wow-offset="number"  距离多远开始执行</li>
            	<li>data-wow-iteration="num"  循环次数</li>
            </ul>
            
 	   </div>
   </div>
</body>
	
</html>